<template>
  <div class="ant-spin-nested">
    <div class="ant-spin-nested-loading">
      <left-nav></left-nav>
      <div class="spin-right-bottom">
          <div
            style="font-weight:550;font-size:25px;color: #333;line-height:40px;text-align: left;"
          >
            业务报表
          </div>
          <div class="ant-spin-right-bottom-box">
            <div class="vue-select">
              <div class="twoline-select">
                <div class="oneline-select">
                  <span class="demonstration">时间选择:</span>
                  <el-date-picker
                    v-model="value1"
                    type="daterange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    value-format="yyyy-MM-dd"
                    style="width:300px;"
                  >
                  </el-date-picker>
                </div>
                <div class="vue-button">
                  <el-button type="primary" @click="initInfo(), listInfo(true)">
                    查 询
                  </el-button>
                </div>
              </div>
            </div>
            <div class="ant-table-scroll">
              <div class="vue-table-head" ref="systemForm">
                <table class="ant-table-fixed">
                  <colgroup>
                    <col style="width:5px;min-width:100px;" />
                    <col style="width:100px;min-width:100px;" />
                    <col style="width:100px;min-width:100px;" />
                  </colgroup>
                  <tr class="infoCalld-tr-head">
                    <th></th>
                    <th>业务名称</th>
                    <th>命中量</th>
                  </tr>
                </table>
              </div>

              <div
                class="vue-table-scroll"
                ref="externalForm"
                @scroll="exterHandleScroll()"
                v-loading="loadFlag"
              >
                <table class="ant-table-fixed">
                  <colgroup>
                    <col style="width:5px;min-width:100px;" />
                    <col style="width:100px;min-width:100px;" />
                    <col style="width:100px;min-width:100px;" />
                  </colgroup>
                  <tbody v-for="(p, index) in infoCalld">
                    <tr class="infoCalld-tr">
                      <th></th>
                    <th>{{p.ywName}}</th>
                    <th>{{p.ywCount}}</th>
                    </tr>
                    
                  </tbody>
                </table>
              </div>
            </div>
            <div class="vue-right-page">
              <div class="vue-right-page-count">
                数据总量:{{ page.allItems }}
              </div>
              <ul class="vue-rigth-page-pages">
                <li
                  class="prev"
                  v-if="page.prevBtn == true"
                  @click="_gotoPage('prev')"
                >
                  <a href="javascript:;">&lt;</a>
                </li>
                <li class="prevDisabled" v-if="page.prevBtn == false">
                  <a href="javascript:;">&lt;</a>
                </li>
                <li
                  :class="{ active: page.currentPage == index }"
                  v-for="index in page.p1"
                  @click="_gotoPage(index)"
                >
                  <a href="javascript:;">{{ index }}</a>
                </li>
                <li class="more" v-if="page.isShowMore1">...</li>
                <li
                  :class="{ active: page.currentPage == index }"
                  v-for="index in page.p2"
                  @click="_gotoPage(index)"
                >
                  <a href="javascript:;">{{ index }}</a>
                </li>
                <li class="more" v-if="page.isShowMore2">...</li>
                <li
                  :class="{ active: page.currentPage == index }"
                  v-for="index in page.p3"
                  @click="_gotoPage(index)"
                >
                  <a href="javascript:;">{{ index }}</a>
                </li>
                <li
                  class="next"
                  v-if="page.nextBtn == true"
                  @click="_gotoPage('next')"
                >
                  <a href="javascript:;">&gt;</a>
                </li>
                <li class="nextDisabled" v-if="page.nextBtn == false">
                  <a href="javascript:;">&gt;</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import leftNav from "../leftNav.vue";
import { GetYwInfo } from "../../api/api.js";
export default {
  name: "GetListInfo",
  data() {
    return {
      infoCalld: [],
      infoSize: 0,
      flag: false,
      loadFlag: false,
      value1: ["", ""],
      page: {
        currentPage: 1,
        allPages: 0,
        allItems: 0,
        pagesize: 20,
        showBtn: 5,
        nextBtn: true,
        prevBtn: false,
        isShowMore1: false,
        isShowMore2: false,
        p1: [],
        p2: [],
        p3: []
      },
      callId: ""
      
    };
  },
  watch: {
    "page.currentpage": function(val) {
      var _this = this;
      _this._getList();
    }
  },
  create() {},
  components: {
    leftNav
  },
  computed: {
    pagination: function() {
      var _this = this;
      var i = _this.page.showBtn - 2;
      if (_this.page.currentPage == _this.page.allPages) {
        _this.page.nextBtn = false;
      }
      var p1 = [],
        p2 = [],
        p3 = [];
      if (_this.page.allPages < _this.page.showBtn) {
      
        _this.page.isShowMore1 = false;
        _this.page.isShowMore2 = false;
        i = _this.page.allPages;
        while (i) {
          p1.unshift(i--);
        }
      } else if (
        _this.page.allPages > _this.page.showBtn &&
        _this.page.allPages < _this.page.showBtn + 1
      ) {
        _this.page.isShowMore1 = false;
        _this.page.isShowMore2 = true;
        if (_this.page.currentPage < 3) {
          p1 = [1, 2, 3];
          p3.push(_this.page.allPages);
        } else {
          p1 = [1];
          i = _this.page.showBtn - 2;
          while (i--) {
            p3.unshift(_this.page.allPages--);
          }
        }
      } else {
        if (_this.page.currentPage < 3) {
          p1 = [1, 2, 3];
          p3.push(_this.page.allPages);
          _this.page.isShowMore1 = false;
          _this.page.isShowMore2 = true;
        } else if (_this.page.currentPage > _this.page.allPages - 2) {
          _this.page.isShowMore1 = true;
          _this.page.isShowMore2 = false;
          p1 = [1];
          i = 3;
          var allPages = _this.page.allPages;
          while (i--) {
            p3.unshift(allPages--);
          }
        } else {
          _this.page.isShowMore1 = true;
          _this.page.isShowMore2 = true;
          if (_this.page.currentPage == 3) {
            _this.page.isShowMore1 = false;
          } else if (_this.page.currentPage == _this.page.allPages - 1) {
            _this.page.isShowMore2 = false;
          }
          p1 = [1];
          p3.push(_this.page.allPages);
          var middle = parseInt((_this.page.showBtn - 2) / 2);
          var start = _this.page.currentPage - middle;
          i = _this.page.showBtn - 2;
          while (i--) {
            p2.push(start++);
          }
        }
      }
      _this.page.p1 = p1;
      _this.page.p2 = p2;
      _this.page.p3 = p3;
    }
  },

  mounted() {
    this.timeDefault();
    this.initInfo();
    this.listInfo(true);
  },

  methods: {
    timeDefault() {
      var myDate = new Date();
      var year = myDate.getFullYear();
      var month = myDate.getMonth(); //获取当前月份(0-11,0代表1月)
      var day = myDate.getDate(); //获取当前日(1-31)
      month = month+1;
      if (month.length == 1) {
        month = "0" + month;
      }
     
      if (day.length == 1) {
        day = "0" + day;
      }
      var today=year + "-" + month + "-" + day
      var yesterday=this.GetYesterday(today)
      console.log(yesterday)
      this.$set(this.value1, 0, yesterday);
      this.$set(this.value1, 1, yesterday);
    },
    GetYesterday(date) {      //获取昨天日期
        let today=new Date(date);
        let yesterday_milliseconds=today.getTime()-1000*60*60*24;
        let yesterday=new Date();      
        yesterday.setTime(yesterday_milliseconds);      
        let strYear=yesterday.getFullYear();   
        let strDay=yesterday.getDate();   
        let strMonth=yesterday.getMonth()+1;
        if(strMonth<10) {   
          strMonth="0"+strMonth;   
        }
        if(strDay<10) {   
          strDay="0"+strDay;   
        }      
        return strYear+"-"+strMonth+"-"+strDay;
    },
    initInfo() {
      this.page.currentPage = 1; //当前页
      this.page.allPages = 0; //页数
      this.page.allItems = 0; //数据总量
      this.page.pagesize = 20;
      this.page.showBtn = 5;
      this.page.nextBtn = true;
      this.page.prevBtn = false;
      this.page.isShowMore1 = false;
      this.page.isShowMore2 = false;
      this.page.p1 = [];
      this.page.p2 = [];
      this.page.p3 = [];
      this.infoCalld = [];
    },
    listInfo(flag) {
    console.log(flag)
      this.loadFlag = false;
      var param = {};
      if (
        this.value1 != null &&
        this.value1[0] != "" &&
        this.value1[0] != null
      ) {
        param.startDate = this.value1[0];
        param.endDate = this.value1[1];
        param.currentPage = (this.page.currentPage - 1) *20;
      }
      
      GetYwInfo(param)
        .then(res => {
          this.infoCalld = res.data;
          this.page.allItems = res.pageSize;
          this.page.allPages = Math.ceil(
            this.page.allItems / this.page.pagesize
          );
          if (flag) {
            var n = 10;
            if (this.page.allPages > 5) {
              this.page.p1 = [1, 2, 3];
              this.page.p2 = [this.page.allPages];
              this.page.isShowMore1 = true;
            } else if (this.page.allPages == 5) {
              this.page.p1 = [1, 2, 3, 4, 5];
              this.page.p2 = [];
              this.page.p3 = [];
            } else if (this.page.allPages == 4) {
              this.page.p1 = [1, 2, 3, 4];
              this.page.p2 = [];
              this.page.p3 = [];
            } else if (this.page.allPages == 3) {
              this.page.p1 = [1, 2, 3];
              this.page.p2 = [];
              this.page.p3 = [];
            } else if (this.page.allPages == 2) {
              this.page.p1 = [1, 2];
              this.page.p2 = [];
              this.page.p3 = [];
            } else if (this.page.allPages == 1) {
              this.page.p1 = [1];
              this.page.p2 = [];
              this.page.p3 = [];
              n = this.page.allItems;
            } else if (this.page.allPages == 0) {
              this.page.p1 = [];
              this.page.p2 = [];
              this.page.p3 = [];
              n = this.page.allItems;
            }
          }
          this.loadFlag = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
   
    handleOver1: function(event) {
      event.currentTarget.className = "select-content-in-area-active1";
    },
    handleOver: function(event) {
      event.currentTarget.className = "select-content-in-area-active";
    },
    handleOut1: function(event) {
      event.currentTarget.className = "select-content-in-first";
    },
    handleOut: function(event) {
      event.currentTarget.className = "select-content-in-area";
    },
    //实现滚动条同步
    exterHandleScroll() {
      this.$refs.systemForm.scrollLeft = this.$refs.externalForm.scrollLeft;
    },
    _gotoPage: function(n) {
      
      var _this = this;
      if (n == _this.page.currentPage) {
        return;
      }
      if (n == 1) {
        _this.page.prevBtn = false;
      } else {
        _this.page.prevBtn = true;
      }
      if (n == _this.page.allPages) {
        _this.page.nextBtn = false;
      } else {
        _this.page.nextBtn = true;
      }
      if (typeof n == "number") {
        _this.page.currentPage = n;
      } else if (n == "next") {
        _this.page.currentPage++;
      } else if (n == "prev") {
        _this.page.currentPage--;
        if (_this.page.currentPage == 1) {
          _this.page.prevBtn = false;
        }
      }
      this.infoCalld = [];
      if (_this.page.currentPage == this.page.allPages) {
        
          this.listInfo(false);
        
      } else {
          this.listInfo(false);
      }

      if (_this.page.currentPage == _this.page.allPages) {
        _this.page.nextBtn = false;
      }
      _this.pagination;
    }
  },

  ready: function() {
    var _this = this;
    _this.pagination;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ant-spin-nested {
  height: 100%;
  width: 100%;
  position: fixed;
  overflow: auto;
}
.ant-spin-nested-loading {
  height: 100%;
  width: 100%;
  position: absolute;
}
.spin-right-bottom {
  position: absolute;
  top: 60px;
  left: 230px;
  right: 0px;
  bottom: 0px;
  color: #666;
  background: #f5f5f5;
  padding: 10px 20px 20px 20px;
}
.ant-spin-right-bottom-box {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  top: 50px;
  color: #666;
  background: #ffffff;
  padding: 20px;
  text-align: left;
}
.vue-select {
  position: absolute;
  top: 10px;
  left: 20px;
  right: 20px;
  height: 50px;
}
.vue-select-oneline {
  height: 40px;
  line-height: 40px;
}
.oneline-select {
  float: left;
  margin-right: 40px;
}
.twoline-select {
  position: absolute;
  top: 10px;
  width: 100%;
  height: 40px;
}
.vue-select-callId-input {
  height: 38px;
  width: 250px;
}
.vue-select-region-input {
  height: 30px;
  width: 100px;
}
.vue-select-exitId-input {
  border: 1px solid #dcdcdc;
  height: 30px;
  width: 150px;
  text-align: center;
  border-radius: 5px;
  outline: none;
}
.vue-select-isws-input {
  border: 1px solid #dcdcdc;
  height: 30px;
  width: 100px;
  text-align: center;
  border-radius: 5px;
  outline: none;
}
.vue-button {
  display: inline-block;
  width: 80px;
  height: 40px;

  float: right;
}
.vue-button button {
  width: 100%;
  height: 40px;
  height-line: 40px;
}
.ant-table-scroll {
  position: absolute;
  top: 80px;
  left: 20px;
  right: 20px;
  height: 500px;
}

.vue-right-page {
  position: absolute;
  top: 525px;
  left: 20px;
  right: 20px;
  height: 50px;
}

.vue-table-head {
  width: 100%;
  position: absolute;
  overflow-x: auto;
  background: #f5f5f5;
}
.vue-table-head th {
  font-weight: 600;
  border-bottom: 2px solid #dcdcdc;
}
.vue-table-scroll {
  top: 40px;
  height: 385px;
  width: 100%;
  position: absolute;
  overflow: auto;
  background: #ffffff;
}
.ant-table-fixed {
  width: 100%;
  border-radius: 3px;
  border-spacing: 0;
}
.infoCalld-tr-head{
height: 40px;
}
.infoCalld-tr {
  height: 30px;
}
th {
  border-bottom: 1px solid #f5f5f5;
}
/* 设置滚动条整体部分 */
.ant-spin-nested::-webkit-scrollbar {
  width: 8px;
}
/* 设置滚动条部分 */
.ant-spin-nested::-webkit-scrollbar-thumb {
  width: 8px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5 px rpba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
.vue-table-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.vue-table-scroll::-webkit-scrollbar-thumb {
  width: 8px;
  border-radius: 10px;
  background: #dddddd;
}
.vue-table-scroll::-webkit-scrollbar-track-piece {
  background-color: #ffffff;
  border-radius: 10px;
  border: 1px solid #dddddd;
}

.vue-table-head::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.vue-table-head::-webkit-scrollbar-thumb {
  width: 8px;
  border-radius: 10px;
}
.select-content-in::-webkit-scrollbar {
  width: 4px;
}
.select-content-in::-webkit-scrollbar-thumb {
  width: 4px;
  border-radius: 8px;
  background: #dddddd;
}
.select-content-in::-webkit-scrollbar-track-piece {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #dddddd;
}
.vue-right-page-count {
  float: left;
  line-height: 40px;
  font-size: 20px;
}
.vue-rigth-page-pages {
  float: right;
  height: 40px;
  line-height: 40px;
  padding: 0 60px;
  list-style-type: none;
}
.vue-rigth-page-pages li {
  float: left;
  height: 40px;
  border: 1px solid #e6ecef;
  border-radius: 8px;
  margin: 0 10px;
  padding: 0 20px;
  color: #263238;
  cursor: pointer;
  text-align: center;
  line-height: 40px;
}
.vue-rigth-page-pages li a {
  text-decoration: none;
  color: #263238;
  font-size: 15px;
}
.vue-rigth-page-pages li.active {
  background-color: #03a9f4;
  border-color: #03a9f4;
}
.vue-rigth-page-pages li.active a {
  color: #fff;
}
.vue-rigth-page-pages li.more {
  background-color: #fff;
}
ul.vue-rigth-page-pages li.prev,
ul.vue-rigth-page-pages li.next {
  width: 7px;
}
.vue-rigth-page-pages li.prevDisabled,
.vue-rigth-page-pages li.nextDisabled {
  width: 7px;
}
.vue-rigth-page-pages li.prevDisabled a,
.vue-rigth-page-pages li.nextDisabled a {
  color: #ccc;
}
.vue-rigth-page-pages li.prevDisabled:hover,
.vue-rigth-page-pages,
.nextDisabled:hover {
  border-color: #e6ecef;
}
.vue-rigth-page-pages li.prevDisabled:hover a,
.vue-rigth-page-pages li.nextDisabled:hover a {
  color: #ccc;
}
.vue-rigth-page-pages li:hover {
  background-color: #03a9f4;
  border-color: #03a9f4;
}
.vue-rigth-page-pages li.more:hover {
  background-color: #fff;
  border: none;
}
.vue-rigth-page-pages li:hover a {
  color: #fff;
}
.vue-rigth-page-pages li.more {
  padding: 0;
  border: none;
  line-height: 22px;
}
.num_total {
  float: right;
  height: 100%;
  line-height: 22px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.num_total > span {
  color: #fc5b27;
}
.select-content {
  z-index: 11;
  position: fixed;
  width: 100px;
  border: 1px solid #f1f1f1;
  top: 175px;
  background: #fff;
  text-align: left;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.select-content-in {
  height: 148px;
  overflow: auto;
}
.select-content-in ul {
  list-style: none;
  padding: 6px 0;
  margin: 0;
}
.select-content-in ul li {
  padding: 0 20px;
  height: 34px;
  line-height: 34px;
  position: relative;
  font-size: 14px;
  cursor: pointer;
  color: #409eff;
}
.select-content-in-area {
  color: #606266;
}
.select-content-in-area-active1 {
  background: #e0e0e0;
  color: #409eff;
}
.select-content-in-area-active {
  background: #e0e0e0;
  color: #409eff;
}
.select-input {
  display: inline-block;
  width: 100px;
}

.table-commu th {
  height: 47px;
}
.commus-clumn {
  width: 80px;
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
